<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      button {
        width: 200px;
        height: 40px;
      }
    </style>
  </head>
  <body>
    <button id="loginBtn">登录</button>
    <button id="orderBtn">查询订单（需要授权）</button>
    <!-- <button id="addressBtn">查询收货地址（需要授权）</button> -->
    <button id="logoutBtn">退出</button>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.9.0/axios.min.js"></script>
    <script>
      // axios请求实例
      const axiosInstance = axios.create({
        baseURL: 'http://127.0.0.1:4000', // 请求基础地址
        timeout: 10000, // 超时时间：超过 `timeout` 的时间，请求将被中断 (0 表示无超时时间)
      })

      // 添加请求拦截器
      axiosInstance.interceptors.request.use(
        function (config) {
          console.log('请求拦截器')
          let token = localStorage.getItem('token')
          // 因为登录页面还没有获取到token
          if (token) {
            // 设置请求头
            config.headers.authorization = token
          }
          // 在发送请求之前做些什么
          return config
        },
        function (error) {
          // 对请求错误做些什么
          return Promise.reject(error)
        }
      )

      // 添加响应拦截器
      axiosInstance.interceptors.response.use(
        function (response) {
          console.log('响应拦截器')
          // 2xx 范围内的状态码都会触发该函数。
          // 对响应数据做点什么
          return response.data
        },
        async function (error) {
          // console.log('error=>', error)
          // 获取http响应状态码
          if (error.status === 401) {
            console.log('用户信息失效')
            let refreshToken = localStorage.getItem('refreshToken')

            try {
              // 请求刷新token接口
              console.log('我要刷新token了')
              let { data } = await axios.post(
                'http://127.0.0.1:4000/refreshToken',
                {
                  refreshToken,
                }
              )
              // 重新写入token
              localStorage.setItem('token', data.data.token)
              // 重发之前的请求
              axiosInstance(error.config)
              console.log('刷新token成功')
            } catch (err) {
              console.log('刷新token失败了,重新登录')
              localStorage.clear()
            }
          }

          // 超出 2xx 范围的状态码都会触发该函数。
          // 对响应错误做点什么
          return Promise.reject(error)
        }
      )

      let loginBtnEle = document.getElementById('loginBtn')
      let orderBtnEle = document.getElementById('orderBtn')
      let addressBtn = document.getElementById('addressBtn')
      let logoutBtnEle = document.getElementById('logoutBtn')

      loginBtnEle.addEventListener('click', async () => {
        let data = await axiosInstance.post('/login', {
          username: 'chengquanfeng',
          password: '111111',
        })

        console.log
        if (data.code === 20000) {
          // 将token持久化
          localStorage.setItem('token', data.data.token)
          localStorage.setItem('refreshToken', data.data.refreshToken)
        }

        alert(data.message)
      })

      orderBtnEle.addEventListener('click', async () => {
        let token = localStorage.getItem('token')
        let data = await axiosInstance.get('/api/order')
        console.log(data)
      })

      addressBtn.addEventListener('click', async () => {
        let token = localStorage.getItem('token')
        try {
          let data = await axiosInstance.get('/api/address')
          console.log(data)
        } catch (err) {}
      })

      logoutBtnEle.addEventListener('click', function () {
        localStorage.clear() // 清除用户信息
        alert('退出成功,去登录页')
      })
    </script>
  </body>
</html>
